<filter-sidebar no-btxns no-hosts no-text></filter-sidebar>
<div class="hk-content-sidebar" ng-class="{ 'hk-content-sidebar-expanded': hideSidebar }">

  <ol class="breadcrumb">
    <li> <a href="/hawkular-ui/apm/btm">Transactions</a> </li>
    <li ng-hide="txn.level === 'Ignore'"> <a href="/hawkular-ui/apm/btm">Managed</a> </li>
    <li ng-show="txn.level === 'Ignore'"> <a href="/hawkular-ui/apm/btm/ignored">Ignored</a> </li>
    <li class="active"> <strong>{{transactionName}}</strong> </li>
  </ol>

  <h1 class="hk-top">{{transactionName}}</h1>

  <div class="row row-cards-pf">
    <div class="col-xs-12">
      <div class="card-pf">
        <div class="card-pf-body">

          <form class="form-inline">
            <div class="form-group">
              <label for="intervalField">Aggregation Interval:</label>
              <select name="intervalField" ng-model="config.interval" ng-change="reloadData()" class="form-control">
                <option value="1000000">1 Second</option>
                <option value="10000000">10 Second</option>
                <option value="30000000">30 Second</option>
                <option value="60000000">1 Minute</option>
                <option value="600000000">10 Minutes</option>
                <option value="3600000000">1 Hour</option>
                <option value="86400000000">1 Day</option>
                <option value="604800000000">7 Day</option>
              </select>
            </div>

            <div class="form-group">
              <label for="lowerBoundField">Lower Bound(%):</label>
              <input type="number" ng-model="config.lowerBoundDisplay"
                    name="lowerBoundField" ng-change="updatedBounds()"
                    min="0" max="100"/>
            </div>

            <div class="form-group">
              <label>Last Update:</label>
              <span class="hk-input-text">{{ (sbFilter.criteria.endTime !== '0' ? sbFilter.criteria.endTime : currentDateTime()) | date:'dd MMM yyyy HH:mm:ss'}}</span>
            </div>

            <div class="pull-right">
              <button class="btn" ng-class="sbFilter.criteria.endTime !== '0' ? 'btn-primary' : 'btn-default'" ng-disabled="sbFilter.timeSpan === ''" ng-click="pauseLiveData()">
                <i class="glyphicon" ng-class="sbFilter.criteria.endTime !== '0' ? 'glyphicon-play' : 'glyphicon-pause'" ></i>
                <span ng-show="sbFilter.criteria.endTime === '0'">Pause Live Data</span>
                <span ng-hide="sbFilter.criteria.endTime === '0'">Resume Live Data</span>
              </button>
              <br>
            </div>

          </form>

          <div id="completiontimelinechart" class="chart-card" pf-c3-chart config="compTimeChartConfig"></div>

        </div>
      </div>
    </div>
  </div><!-- .row-cards-pf -->

  <div class="row row-cards-pf hk-row-cards-flexbox">

    <div class="col-md-6 col-sm-12">
      <div class="card-pf">
        <div class="card-pf-title">
          Faults
        </div>
        <div class="card-pf-body">
          <div id="completiontimefaultschart" class="chart-card" pf-c3-chart config="ctFaultChartConfig" ng-show="faults.length" get-chart-callback="getFaultsChart"></div>
          <div id="btm-faults-placeholder" class="text-center" ng-hide="faults.length">
            <i class="fa fa-pie-chart hk-no-pie-data"></i>
            <h1> No Data Available </h1>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-sm-12">
      <div class="card-pf">
        <div class="card-pf-title">
          Property
          <div class="col-md-6 pull-right">
            <select name="propertyField" class="form-control"
              ng-model="config.selectedProperty" ng-change="reloadProperty()" ng-show="properties.length">
              <option value="" disabled>Select a property</option>
              <option ng-repeat="property in properties | filter:{name: '!fault'}">{{property.name}}</option>
            </select>
          </div>
        </div>
        <div class="card-pf-body">
          <div id="completiontimepropertychart" class="chart-card" pf-c3-chart config="ctPropChartConfig" ng-show="properties.length" get-chart-callback="getPropsChart"></div>
          <div id="btm-properties-placeholder" class="text-center" ng-hide="properties.length">
            <i class="fa fa-pie-chart hk-no-pie-data"></i>
            <h1> No Data Available </h1>
          </div>
        </div>
      </div>
    </div>

  </div><!-- .row-cards-pf -->

</div>